import React, { useMemo, useContext, useRef } from 'react';
import { Popover, Checkbox, Typography, Dropdown, Menu, } from 'antd';
import HalfCheckBox from './HalfCheckBox';
import { ThemeContext } from '../context';
import CustomValue from '../CategoryListRender/CustomValue'
import SecondImg from '../SecondImg'
import { getFileTypeIconSvg, getEditor } from '@inbiz/utils';
import type { ICategorySelect } from '../content';
import { InbizIcon } from '@inbiz/utils';

const folderIcon = getFileTypeIconSvg('.folder');
const { Text } = Typography;

interface PropsObj {
  childItem: {
    Value: string;
    Icon?: string;
    sectionItemList: {
      Count: number;
      Key: string;
      Value: string;
    }[];
  };
  parentItem: {
    Key: string;
    IsWhether: boolean;
    ShowHierarchy: number;
    SectionGroupData: {
      Key: string;
      Value: string;
      sectionItemList: PropsObj['childItem']['sectionItemList'];
    }[];
  };
  onSelected: ICategorySelect;
  selected: string[];
  level: number;
  designer: boolean;
}

const GetIcon = (props: { categoryKey: string; value: string }) => {
  const { categoryKey, value } = props;
  const icon = useMemo(() => {
    return categoryKey === 'parentfolderid' || categoryKey === 'fileextname' ? (
      <img
        src={categoryKey === 'parentfolderid' ? folderIcon : getFileTypeIconSvg(value)}
        className="categoryItem-Icon"
      />
    ) : null;
  }, [categoryKey, value]);

  return icon;
};

const CustomPopover = (props: PropsObj) => {
  const { childItem, parentItem, onSelected, selected, level } = props;
  const { getChecked, handlechange } = useContext(ThemeContext);
  const popovermenu = (
    <>
      {childItem.sectionItemList.map((item: { Key: string; Value: string; Count: number }) => (
        <div key={item.Value}>
          <Checkbox
            onChange={(e) => {
              onSelected([item.Key], e.target.checked, level, parentItem.IsWhether)
            }}
            checked={selected.includes(item.Key)}
          >
            <GetIcon categoryKey={parentItem.Key} value={item.Value} />
            <Text style={{ width: 85 }} ellipsis title={`${item.Value} (${item.Count})`}>
              {item.Value}
              {`(${item.Count})`}
            </Text>
          </Checkbox>
        </div>
      ))}
    </>
  );

  const dropdownmenu = (
    <Menu
      items={childItem.sectionItemList.map((item) => ({
        key: item.Value,
        label: (
          <div
            className={`allOption ${selected.includes(item.Key) ? 'selectedOption' : ''}`}
            onClick={() => {
              onSelected([item.Key], true, level, parentItem.IsWhether)
            }}
          >
            <GetIcon categoryKey={parentItem.Key} value={item.Value} />
            <Text style={{ width: 85 }} ellipsis title={`${item.Value} (${item.Count})`}>
              {item.Value}
              {`(${item.Count})`}
            </Text>
          </div>
        ),
      }))}
    />
  );
  if (parentItem.IsWhether) {
    return (
      <Popover
        content={parentItem.ShowHierarchy == 3 && popovermenu}
        // visible={true}
        placement="bottomLeft"
        overlayClassName="customTopPopover"
        trigger={getEditor() ? '' : 'hover'}
        getPopupContainer={() => document.body}
      >
        <span title={childItem.Value}>
          <HalfCheckBox
            getChecked={getChecked}
            item={childItem}
            selected={selected}
            handlechange={handlechange}
            level={level}
            checkboxTitle={childItem.Value}
            showIcon
          />

        </span>
      </Popover>
    );
  }

  return (
    <Dropdown
      overlay={dropdownmenu}
      // visible={true}
      overlayClassName="customTopRadio"
    >
      <span>
        <SecondImg Icon={childItem.Icon} />
        <span title={childItem.Value}>{childItem.Value}
          <InbizIcon
            type={'icon-ic-arrow-down-bold'}

          />{' '}
        </span>
      </span>
    </Dropdown>
  );
};

type customMultipleTopPropsObj = Pick<PropsObj, 'selected' | 'onSelected' | 'level' | 'parentItem' | 'designer'>;
export default function customMultipleTop(props: customMultipleTopPropsObj) {
  const { selected, onSelected, level, parentItem, designer } = props;
  const { SectionGroupData } = parentItem;
  
  return (
    <div className="customTopIsGroup" style={{ pointerEvents: designer ? 'none' : 'auto' }}>
      {SectionGroupData.map((item: PropsObj['childItem']) => (
        <CustomPopover
          parentItem={parentItem}
          childItem={item}
          key={item.Value}
          onSelected={onSelected}
          selected={selected}
          level={level}
        />
      ))}
      {parentItem.IsCustomSearch && <CustomValue item={parentItem} onSelected={onSelected} index={level} />}
    </div>
  );
}
